<script setup>
import { Icon } from "@iconify/vue";
import { message } from "ant-design-vue";
import { loginFetch } from "../composables/useHttpFetch";

const formState = reactive({
  phone: "",
  password: "",
});

const checked = ref(false);

const login = async () => {
  if (!formState.phone) {
    return message.error("请输入手机号");
  } else if (!formState.password) {
    return message.error("请输入密码");
  }
  try {
    const { data, error } = await loginFetch({
      method: "POST",
      body: { ...formState },
      server: false,
      key: "loginFetch",
    });
    
    // 检查是否有错误（连接错误等）
    if (error.value) {
      console.error("Login error:", error.value);
      message.error("连接服务器失败，请检查服务器是否运行");
      return;
    }
    
    // 检查数据是否存在
    if (!data.value) {
      message.error("服务器响应异常，请稍后重试");
      return;
    }
    
    if (data.value.code === 0) {
      const accessTokenCookie = useCookie("accessToken", {
        maxAge: 60 * 60 * 60 * 24 * 7, // 7天
      });
      accessTokenCookie.value = data.value.data.accessToken;
      const userInfoCookie = useCookie("userInfo", {
        maxAge: 60 * 60 * 60 * 24 * 7, // 7天
      });
      userInfoCookie.value = data.value.data.userInfo;
      window.location.href = "/";
    } else {
      message.error(data.value.msg || "登录失败");
    }
  } catch (err) {
    console.error("Login exception:", err);
    message.error("登录过程中发生错误，请稍后重试");
  }
};
</script>

<template>
  <div class="auth-page login-page">
    <div class="logo">
      <NuxtLink href="#" class="">
        <img src="/images/logo.png" alt="logo" />
      </NuxtLink>
    </div>
    <div class="auth-content">
      <a-row type="flex" justify="center" style="width: 100%">
        <a-col :span="16">
          <a-row>
            <a-col :span="12">
              <a-row class="login-left" type="flex" justify="end">
                <img class="sign_bg" src="/images/sign_bg.png" alt="sign_bg" />
                <a-row>
                  <a-button
                    style="width: 250px; height: 45px"
                    shape="round"
                    size="large"
                    type="primary"
                    >下载简书APP</a-button
                  >
                  <a-popover placement="topRight">
                    <template #content>
                      <div class="page_download">
                        <img
                          style="width: 100px"
                          src="/images/login_page_download.png"
                          alt="download"
                        />
                      </div>
                    </template>
                    <div class="page_download">
                      <img
                        src="/images/login_page_download.png"
                        alt="download"
                      />
                    </div>
                  </a-popover>
                </a-row>
              </a-row>
            </a-col>
            <a-col :span="12">
              <div class="login-right">
                <div class="login-form">
                  <a-row type="flex" justify="center" class="tag-title">
                    <NuxtLink to="/sign_in" class="active">登录</NuxtLink>
                    <b>·</b>
                    <NuxtLink to="/sign_up" class="sign_up">注册</NuxtLink>
                  </a-row>
                  <div class="form">
                    <a-form :model="formState">
                      <a-form-item>
                        <a-input
                          style="
                            border: none;
                            background-color: #f7f7f7 !important;
                          "
                          placeholder="手机号或邮箱"
                          v-model:value="formState.phone"
                        >
                          <template #prefix>
                            <Icon icon="ep:user-filled" />
                          </template>
                        </a-input>
                      </a-form-item>
                      <a-form-item style="border-top: 1px solid #c8c8c8">
                        <a-input
                          style="
                            border: none;
                            background-color: #f7f7f7 !important;
                          "
                          placeholder="密码"
                          type="password"
                          v-model:value="formState.password"
                        >
                          <template #prefix>
                            <Icon icon="ant-design:lock-filled" />
                          </template>
                        </a-input>
                      </a-form-item>
                    </a-form>
                  </div>
                  <a-row type="flex" justify="space-between">
                    <a-checkbox v-model:checked="checked">记住我</a-checkbox>
                    <span>登录遇到问题?</span>
                  </a-row>
                  <a-row type="flex" justify="center" class="sign_in_btn">
                    <a-button @click="login" shape="round"> 登录 </a-button>
                  </a-row>
                  <div class="more-sign">
                    <h6>社交帐号登录</h6>
                    <a-row
                      type="flex"
                      justify="center"
                      style="margin-top: 30px"
                    >
                      <div>
                        <Icon
                          icon="ant-design:weibo-outlined"
                          style="color: #e05344; font-size: 30px"
                        />
                      </div>
                      <div style="margin: 0 30px">
                        <Icon
                          icon="ant-design:wechat-outlined"
                          style="color: #00bb29; font-size: 30px"
                        />
                      </div>
                      <div>
                        <Icon
                          icon="ant-design:qq-outlined"
                          style="color: #498ad5; font-size: 30px"
                        />
                      </div>
                    </a-row>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="scss">
@use "../assets/styles/global.scss";
@use "../assets/styles/antd-overrides.scss";
</style>
